<template>
  <div  class="app-container">
      <div class="product-div" >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">

        <el-row :gutter="15">
          <el-col :span="10">
            <el-form-item label="赠品名称" prop="giftName">
              <el-input v-model="form.giftName" placeholder="请输入赠品名称" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col>
            <el-form-item label="活动商品" prop="proUid">
              <el-button @click="selPro" :disabled="true">选择商品</el-button>
              <!-- 已选商品列表组件-->
              <selectedPro v-if="proTableOpen" @tabRespon="tabFun" :tabList="tabList" :tabUids="tabUids"
               :isShow="isShow" :destroy-on-close="true">
               </selectedPro>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col :span="10">
            <el-form-item label="赠品总数" prop="stockNumber">
              <el-input v-model="form.stockNumber" placeholder="请输入赠品总数"  oninput="value=value.replace(/[^\d]/g,'')"  :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="10">
            <el-form-item label="有效天数" prop="periodValidity">
              <el-input v-model="form.periodValidity" placeholder="请输入领取后有效天数" oninput="value=value.replace(/[^\d]/g,'')" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="10">
            <el-form-item label="领取时间" prop="startTime">
              <el-date-picker v-model="timeValue" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" @change="getSTime" :disabled="true">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

    </el-form>

    <div slot="footer" class="dialog-footer" align="center" style="margin-bottom: 20px;">
      <el-button type="primary" @click="submitForm" :disabled="true">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
      </div>

    <!-- 选择商品对话框-->
    <el-dialog :title="selTitle" :visible.sync="selOpen" width="1000px" append-to-body :destroy-on-close="true" >
      <productRadio v-if="selOpen" @idsId="idsId" :uids="selUids" ></productRadio>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getGift,
    addGift,
    updateGift
  } from "@/api/activity/gift";

  import product from '@/components/Product/product';
  import selectedPro from '@/components/Activity/selectedPro';
  import productRadio from '@/components/Product/productRadio';

  export default {
    name: "Gift",
    components: {
      product,
      selectedPro,
      productRadio
    },
    data(){
      return {
        giftUid:null,
        form:{},
        // 表单校验
        rules: {
          giftName: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          proUid: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          stockNumber: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          periodValidity: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          startTime: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          endTime: [
            { required: true, message: "不能为空", trigger: "blur" }
          ]
        },
        isShow:false,
        selOpen:false,
        proTableOpen:false,
        selTitle:"",
        selUids:"",
        proDatas:[],
        // 赠品表格数据
        giftList: [],
        tabUids:[],
        tabList:[],
        proDa:{
          productUid:null,
          productName:null,
          productImg:null,
          price:null,
          stockNumber:null
        },
        timeValue: [],
      }
    },
    created(){
      console.log(111)
      console.log(this.$route.params)
      this.giftUid = this.$route.params && this.$route.params.giftUid;
      console.log(this.giftUid)
      if(this.giftUid)
        this.startMethod();
    },
    methods:{
      startMethod(){
        getGift(this.giftUid).then(response => {
          this.tabList = [];
          this.form = response.data;
          this.timeValue.push(this.form.startTime);
          this.timeValue.push(this.form.endTime);
          console.log(this.form)
          //关闭进行局部刷新
          this.proTableOpen = false;
          //回显选择商品
          this.selUids = this.form.proUid;
          //回显表格
          this.tabUids.push(this.form.proUid);
          this.proDa.productUid = this.form.proUid;
          this.proDa.productName = this.form.proName;
          this.proDa.productImg = this.form.proImg;
          this.tabList.push(this.proDa);
          //在表格数据加载之后执行
          this.$nextTick().then(() => {
            this.proTableOpen = true;
          })
          this.open = true;
          this.title = "修改赠品";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.giftUid != null) {
              updateGift(this.form).then(response => {
                this.msgSuccess("修改成功");
                if (response.code === 200) {
                  this.close();
                }
              });
            } else {
              addGift(this.form).then(response => {
                this.msgSuccess("新增成功");
                if (response.code === 200) {
                  this.close();
                }
              });
            }
          }
        });
      },
      /** 关闭按钮 */
      close() {
        this.$router.push({ path: "/activity/gift", query: { t: Date.now()}})
      },
      /** 选择商品组件 */
      selPro(){
        this.selOpen = true;
        this.selTitle = "选择可用商品";
      },
      /** 商品组件选择数据回传 */
      idsId(ids){
        this.$forceUpdate();//强制刷新
        if(ids && ids.productUid){
          this.tabUids = [];
          this.tabList = [];
          this.proTableOpen = false;

          this.selUids = ids.productUid;

          this.tabUids.push(ids.productUid);
          this.tabList.push(ids);

          this.form.proUid = ids.productUid;
          this.form.proName = ids.productName;
          this.form.proImg = ids.productImg;

          this.$nextTick().then(() => {
            this.proTableOpen = true;
          })

        }
        this.selOpen = false;
      },
      /** 已选商品表格数据更新 */
      tabFun(data,v){
        this.selUids = "";
        if(v)
          this.selUids = v[0];//同步已选商品ID
        this.tabUids = v;
        if(data){
          if(data.length==0){
            this.form.proUid = null;
            this.form.proName = null;
            this.form.proImg = null;
            this.proTableOpen = false;
          }else{
            this.form.proUid = data.productUid;
            this.form.proName = data.productName;
            this.form.proImg = data.productImg;
          }
        }
      },
    },
  }
</script>

<style scoped>
  .product-div {
    background-color: #fff;
    position: relative;
    padding: 54px 30px;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    width: 800px;
    margin: 0 auto;
  }

</style>
